<template>
	<view class="user-stored-list" :style="{background:pageColor}">

		<!-- 	<fixed>
			<view class="count-list flex-center f-caption c-title pd-md fill-base">
				<view class="count-item flex-center flex-column">{{total_price}}
					<view class="f-icontext">服务费</view>
				</view>
				<view class="count-item flex-center flex-column">{{discount_cash}}
					<view class="f-icontext">抵扣服务费</view>
				</view>
				<view class="count-item flex-center flex-column">{{car_price}}
					<view class="f-icontext">车费</view>
				</view>
				<view class="count-item flex-center flex-column">{{discount_car_cash}}
					<view class="f-icontext">抵扣车费</view>
				</view>
			</view>
		</fixed -->

		<view class="space-md"></view>
		<view @tap.stop="toCheckItem(index)" class="ml-md mr-md fill-base radius-26"
			:class="[{'mt-md':index!=0},{'box-shadow':item.is_check}]" v-for="(item,index) in list.data" :key="index">
			<view class="stored-card-item pd-lg fill-base radius-26 rel"
				:style="{borderColor:item.is_check?primaryColor:'#fff'}">
				<image class="abs card-img" :src="`https://api.huixuananmm.com/admin/anmo/balancediscount/card-bg.png`">
				</image>
				<view class="card-time flex-center f-icontext c-base abs" :style="{background:primaryColor}">
					{{item.over_time}} 到期
				</view>
				<view class="rel flex-between">
					<view class="flex-between" :class="[{'mt-lg':item.discount}]">
						<view style="width:285rpx">
							<view class="flex-y-baseline f-caption c-black" style="height:78rpx">
								<view style="font-size: 70rpx">{{item.pay_price}}</view>
								元
							</view>
							<view class="f-paragraph mt-md" style="color:#323E3A">
								{{item.title}}
							</view>
						</view>
						<view class="card-text flex-y-center f-icontext c-base">享
							<view class="f-title text-bold">
								{{item.discount||0}}
							</view>折优惠
						</view>
					</view>
					<view style="width:184rpx">
						<view class="flex-y-baseline f-paragraph c-title text-bold">
							<view class="f-md-title">{{item.cash||0}}</view>元
						</view>
						<view>当前余额</view>
					</view>
				</view>
			</view>
			<view class="count-list flex-center f-caption c-title pd-md" v-if="item.is_check">
				<view class="count-item flex-center flex-column">{{item.value_cash}}
					<view class="f-icontext">消费</view>
				</view>
				<view class="count-item flex-center flex-column">{{item.true_total_cash}}
					<view class="f-icontext">抵扣服务费</view>
				</view>
				<view class="count-item flex-center flex-column">{{item.discount_car_cash}}
					<view class="f-icontext">抵扣车费</view>
				</view>
				<view class="count-item flex-center flex-column">{{item.discount_cash}}
					<view class="f-icontext">优惠</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1" :isCenter="true"></abnor>

		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="toUse" :text="[{text:'立即使用',type:'confirm'}]" bgColor="#fff"
			v-if="list.data&&list.data.length>0">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				param: {
					page: 1,
					limit: 10
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
				car_price: 0,
				total_price: 0,
				discount_cash: 0,
				discount_car_cash: 0,
				balance_discount_card_arr: []
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.options = options
			try {
				let {
					init_goods_price = 0,
						init_material_price = 0,
						int_pay_price = 0,
						free_fare = 0,
						car_price = 0,
						balance_discount_data
				} = this.$util.getPage(-1).orderInfo
				this.car_price = free_fare ? 0 : car_price || 0
				this.total_price = int_pay_price ? int_pay_price * 1 : (init_goods_price * 1 + init_material_price * 1)
					.toFixed(2) * 1
				this.balance_discount_card_arr = balance_discount_data.balance_discount_list.map(item => {
					return item.id
				})
			} catch (e) {
				// #ifdef H5
				history.back()
				// #endif
			}
			await this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updateOrderItem', 'updateUserItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					param,
					balance_discount_card_arr
				} = this
				let newList = await this.$api.order.balanceDiscountList(param)
				newList.data.map(item => {
					item.is_check = balance_discount_card_arr.includes(item.id)
				})
				newList.data = this.toFormatData(newList.data)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			toFormatData(data) {
				let {
					balance_discount_card_arr,
					total_price,
					car_price
				} = this
				let discount_car_cash = 0
				let discount_cash = 0
				let true_car_price = 0
				let true_total_price = 0
				data.map(item => {
					true_car_price = car_price - discount_car_cash
					true_total_price = total_price - discount_cash

					let value_cash = (true_total_price * item.discount / 10).toFixed(3) * 1
					value_cash = value_cash <= item.cash * 1 ? value_cash : item.cash * 1
					item.true_value_cash = value_cash.toFixed(2)
					let true_total_cash = (value_cash / item.discount * 10).toFixed(2) * 1
					item.true_total_cash = true_total_cash
					item.discount_cash = (true_total_cash * (10 - item.discount) / 10).toFixed(2)

					let true_dis_car_price = item.cash * 1 - item.true_value_cash * 1
					let dis_car_cash = item.is_check ? true_dis_car_price > true_car_price ? true_car_price :
						true_dis_car_price : 0
					item.discount_car_cash = dis_car_cash.toFixed(2)

					item.value_cash = (value_cash * 1 + item.discount_car_cash * 1).toFixed(2)

					if (item.is_check) {
						discount_cash += item.true_total_cash * 1
						discount_car_cash += item.discount_car_cash * 1
					}
					if (item.true_total_cash * 1 == 0 && item.discount_car_cash * 1 == 0) {
						item.is_check = false
					}
				})
				this.discount_cash = discount_cash.toFixed(2)
				this.discount_car_cash = discount_car_cash.toFixed(2)
				return data
			},
			toCheckItem(index) {
				let {
					id,
					is_check,
					cash = 0,
					value_cash = 0,
				} = this.list.data[index]
				let {
					total_price = 0,
						discount_cash = 0,
						car_price = 0,
						discount_car_cash = 0
				} = this
				let total_discount_cash = (value_cash * 1 + car_price * 1).toFixed(2) * 1
				let true_total_price = (total_price * 1 + car_price * 1).toFixed(2) * 1
				let true_discount_cash = (discount_cash * 1 + discount_car_cash * 1).toFixed(2) * 1
				cash = cash * 1
				if (!cash) {
					this.$util.showToast({
						title: `该卡无余额，不可选择哦`
					})
					return
				}
				if (cash >= total_discount_cash && !is_check && true_discount_cash == 0) {
					this.list.data.map(item => {
						item.is_check = item.id == id

					})
					this.list.data = this.toFormatData(this.list.data)
					return
				}
				this.list.data[index].is_check = !is_check
				this.list.data = this.toFormatData(this.list.data)
			},
			toUse() {
				let arr = this.list.data.filter(item => {
					return item.is_check
				})
				if (arr.length == 0) {
					this.$util.showToast({
						title: `您暂未选择折扣卡哦`
					})
					return
				}
				let {
					total_price,
					car_price,
					discount_cash,
					discount_car_cash
				} = this
				if ((total_price * 1 != discount_cash * 1) || (car_price * 1 != discount_car_cash * 1)) {
					this.$util.showToast({
						title: `当前选择折扣卡余额不足`
					})
					return
				}
				this.$util.getPage(-1).orderInfo.is_remember = 0
				this.$util.getPage(-1).orderInfo.balance_discount_data.balance_discount_list = arr
				this.$util.back()
				setTimeout(() => {
					this.$util.goUrl({
						url: 1,
						openType: 'navigateBack'
					})
				}, 1000)
			}
		}
	}
</script>


<style lang="scss">
	.user-stored-list {

		.stored-card-item {
			width: 710rpx;
			height: 232rpx;
			background: linear-gradient(184deg, #C9F5E4 0%, #FFFFFF 100%);
			border: 4rpx solid #FFFFFF;

			.card-time {
				top: 0;
				left: 0;
				min-width: 110rpx;
				height: 40rpx;
				padding: 0 25rpx;
				border-radius: 22rpx 0 32rpx 0;
			}

			.card-text {
				min-width: 128rpx;
				height: 45rpx;
				padding: 0 10rpx;
				background: linear-gradient(270deg, #FF6453 0%, #FF6262 68%, #FFC86F 100%);
				border-radius: 66rpx 66rpx 66rpx 0;
				// border: 1rpx solid #FFFFFF;
			}

			.card-img {
				width: 328rpx;
				height: 195rpx;
				top: 29rpx;
				left: 164rpx;
			}

		}

		.count-list {
			width: 100%;

			.count-item {
				width: 25%;
			}
		}
	}
</style>